* {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul {
	margin: 10px auto 0;
	display: flex;
	flex-wrap: wrap;
	width: 500px;
	height: 500px;
	justify-content: space-between;
	align-content: space-between;
	li {
		width: 150px;
		height: 150px;
		border: 4px solid gray;
		&:not(:nth-child(5)){
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-direction: column;
			.show_img {
				width: 100px;
				height: 100px;
				overflow: hidden;
				img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			p {
				font-size: 18px;
			}
			span {
				font-size: 24px;
			}
		}
		&:nth-child(5){
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			font-size: 48px;
			border-color: red;
			border-color: white;
			background-color: orange;
			&:hover {
				background-color: coral;
				span {
					color: white;
				}
			}
			span {
				color: red;
				align-items: center;
				display: inline-block;
				width: 2em;
				&::before {
					content: "";
					display: block;
					width: 50px;
					height: 4px;
					background-color: red;
					position: absolute;
					left: 0;
					bottom: 0;
					transform: translateY(100%);
				}
				&::after {
					content: "";
					display: block;
					width: 50px;
					height: 4px;
					background-color: red;
					position: absolute;
					right: 0;
					bottom: 0;
					transform: translateY(100%);
				}
			}
			&::before {
				content: "";
				display: block;
				width: 50px;
				height: 4px;
				background-color: red;
				position: absolute;
				left: 0;
				top: 0;
				transform: translateY(-100%);
			}
			&::after {
				content: "";
				display: block;
				width: 50px;
				height: 4px;
				background-color: red;
				position: absolute;
				right: 0;
				top: 0;
				transform: translateY(-100%);
			}
		}
		&.active {
			background-color: pink;
			border-color: hotpink;
			transform: scale(1.1);
		}
	}
}